<template>
	<view class="shopping-waterfall">
		 <custom-waterfalls-flow ref="waterfallsFlowRef" :value="data.list" :column="2"  @wapperClick="wapperClick" @imageClick="imageClick" @loaded="loaded">
			 <template v-slot:default="item">
			             <view class="item">
			                 <view class="title">{{item.title}}</view>
			                 <view class="desc">{{item.desc}}</view>
			             </view>
			         </template>
		 </custom-waterfalls-flow>
	</view>
</template>

<script setup>
    import { reactive, ref } from 'vue';
	import { onReachBottom } from '@dcloudio/uni-app';
    const data = reactive({
        list: [
            { image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }, 
            { image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' },
			{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' },
			{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' },
			{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' },
			{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: '我是标题2', desc: '描述描述描述描述描述描述描述描述2' }
        ]
    });
    const waterfallsFlowRef = ref(null);
	
	function add() {
		const newArr = [{ image: 'https://via.placeholder.com/58x100.png/FF7F50', title: '我是标题8', desc: '描述描述描述描述描述描述描述描述8' }, 
						{ image: 'https://via.placeholder.com/59x100.png/C0C0C0', title: '我是标题9', desc: '描述描述描述描述描述描述描述描述9' }, 
						{ image: 'https://via.placeholder.com/60x100.png/FAEBD7', title: '我是标题10', desc: '描述描述描述描述描述描述描述描述10' }];
						data.list = data.list.concat(newArr);
						// console.log("触发了");
		}
	
	function changeColumn(h) {
		column.value = !h ? column.value - 1 : column.value + 1;
	}
	
	function loaded() {
	        console.log('加载完成')
	    }

    function wapperClick(item) {
        console.log('单项点击事件', item)
    }

    function imageClick(item) {
        console.log('图片点击事件', item)
    }

    function reset(){
        data.list = [{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: '我是标题1', desc: '描述描述描述描述描述描述描述描述1' }]
        waterfallsFlowRef.value.refresh();
    }
	
	onReachBottom(()=>{
		add()
	})
</script>

<style lang="scss" scoped>
	.shopping-waterfall{
		margin-top: 20rpx;
		width: 90%;
	}
</style>